<template>
    <div>
        <div>
            <Nav></Nav>
            <v-title>订单查询</v-title>
        </div>
        <el-row>
            <el-col :span="6" :offset="4">
                <h2>订单查询</h2>
            </el-col>
        </el-row>
        <el-row>
            <div class="search">
                <el-select v-model="searchValue" placeholder="请选择">
                    <el-option v-for="item in statusList" :key="item.searchValue" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                &nbsp;&nbsp;&nbsp;
                <button type="button" class="el-button el-button--primary is-round" @click="getOrderList">
                    <span>查询</span>
                </button>
            </div>
        </el-row>
        <br /><br />
        <el-row class="order-list">
            <div v-if="orderList.length > 0">
                <div v-for="(order, key) in orderList" :key="key" @click="getOrderDetail(order.orderSn)">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <b>订单编号：{{ order.orderSn }}</b>
                        </div>
                        <div class="text item">
                            <el-row>
                                <el-col :md="8"> 收件人： {{order.nickname}}</el-col>
                                <el-col :md="8">
                                    <span v-if="order.status == 0">订单状态：<el-tag type="info">未支付</el-tag></span>
                                    <span v-if="order.status == 1">订单状态：<el-tag type="danger">取消订单</el-tag></span>
                                    <span v-if="order.status == 2">订单状态：<el-tag>已支付</el-tag></span>
                                    <span v-if="order.status == 3">订单状态：<el-tag type="success">已收货</el-tag></span>
                                </el-col>
                                <el-col :md="8" v-if="order.actualPrice > 0">
                                    实付金额：<span class="detailContentPrice">￥{{ order.actualPrice }}</span>
                                </el-col>
                            </el-row>
                            <br />
                            <el-row>
                                <el-col :md="24"> 地址：{{ order.address }} </el-col>
                            </el-row>
                            <br />
                            <el-row>
                                <el-col :md="24"> 备注：{{ order.remark }} </el-col>
                            </el-row>
                        </div>
                    </el-card>
                    <br /><br />
                </div>
                <el-backtop />
                <el-divider>亲~已经看到底了吖~</el-divider>
            </div>
            <div v-else>
                <el-result title="目前没有订单记录..." subTitle="目前任何用户都没有下过任何订单噢~">
                    <template slot="icon">
                        <el-image :src="require('@/assets/logo.png')" style="width: 200px; height: 200px" />
                    </template>
                    <template slot="extra">
                        <router-link to='/gameGoods'>
                            <el-button type="primary" size="medium">返回~</el-button>
                        </router-link>
                    </template>
                </el-result>
            </div>
        </el-row>
        <br />
        <el-dialog title="订单详情" :visible.sync="dialogOrderDetailVisible">
            <el-divider content-position="left">个人/订单信息部分</el-divider>
            <el-row>
                <el-col :md="10" :offset="1"> 收件人：{{orderDetail.nickname}} </el-col>

                <el-col :md="7" v-if="orderDetail.order.actualPrice > 0">
                    实付金额：<span class="detailContentPrice">￥{{ orderDetail.order.actualPrice }}</span>
                </el-col>
            </el-row>
            <br />
            <el-row>
                <el-col :md="23" :offset="1">
                    地址：{{ orderDetail.order.address }}
                </el-col>
            </el-row>
            <br />
            <el-row>
                <el-col :md="23" :offset="1">
                    备注：{{ orderDetail.order.remark }}
                </el-col>
            </el-row>
            <br />
            <el-row>
                <el-col :md="10" :offset="1">
                    订单编号：<b>{{ orderDetail.order.orderSn }}</b>
                </el-col>
                <el-col :md="10" v-if="orderDetail.order.actualPrice > 0">
                    支付时间：{{ orderDetail.order.payTime }}
                </el-col>
            </el-row>
            <br />
            <el-row>
                <el-col :md="8" :offset="1">
                    <span v-if="orderDetail.order.status == 0">订单状态：<el-tag type="info">未支付</el-tag></span>
                    <span v-if="orderDetail.order.status == 1">订单状态：<el-tag type="danger">取消订单</el-tag></span>
                    <span v-if="orderDetail.order.status == 2">订单状态：<el-tag>已支付</el-tag></span>
                    <span v-if="orderDetail.order.status == 3">订单状态：<el-tag type="success">已收货</el-tag></span>
                </el-col>
            </el-row>
            <br />
            <el-row v-if="orderDetail.order.actualPrice > 0">
                <el-col :md="23" v-if="orderDetail.order.payType == 1" :offset="1">
                    支付方式：微信支付
                </el-col>
                <el-col :md="23" v-if="orderDetail.order.payType == 2" :offset="1">
                    支付方式：支付宝支付
                </el-col>
            </el-row>
            <el-divider content-position="left">商品信息部分</el-divider>
            <div v-for="(orderGoods, key) in orderDetail.orderDetail" v-bind:key="key">
                <el-row>
                    <el-col :span="6" :offset="2"><img :src="orderGoods.img" width="250" height="192" /></el-col>
                    <el-col :span="12" :offset="4">
                        <el-row>
                            <router-link :to="`/gameGoodsDetail/${orderGoods.gameGoodsId}`">{{
                            orderGoods.name
                            }}</router-link>
                        </el-row>
                        <br />
                        <el-row>
                            <el-col :span="5">
                                <span class="detailContent">子订单编号</span>
                            </el-col>
                            <el-col :span="19">
                                <span class="detailContentNum">{{
                                orderGoods.orderSubSn
                                }}</span>
                            </el-col>
                        </el-row>
                        <br />
                        <el-row>
                            <el-col :span="5">
                                <span class="detailContent">价格</span>
                            </el-col>
                            <el-col :span="19">
                                <span class="detailContentPrice">￥{{ orderGoods.price }}</span>
                            </el-col>
                        </el-row>
                        <br />
                        <el-row>
                            <el-col :span="5">
                                <span class="detailContent">数量</span>
                            </el-col>
                            <el-col :span="19">
                                <span class="detailContentNum">{{ orderGoods.num }}</span>
                            </el-col>
                        </el-row>
                        <br />
                        <el-row v-if="orderDetail.order.status > 1">
                            <el-col :span="5">
                                <span class="detailContent" v-if="orderGoods.refundStatus != 1">退款状态</span>
                            </el-col>
                            <el-col :span="19">
                                <span class="detailContentNum" v-if="orderGoods.refundStatus == 0">
                                    未退款
                                </span>
                                <span class="detailContentNum" v-if="orderGoods.refundStatus == 1">
                                    <el-button type="primary" round
                                        @click="refund(orderGoods.orderSubSn, orderDetail.order.orderSn, 2)" size="mini">
                                        同意退款
                                    </el-button>
                                    <el-button type="info" round
                                        @click="refund(orderGoods.orderSubSn, orderDetail.order.orderSn, 1)" size="mini">
                                        拒绝退款
                                    </el-button>
                                </span>
                                <span class="detailContentNum" v-if="orderGoods.refundStatus == 2">已退款</span>
                            </el-col>
                        </el-row>
                        <br />
                        <el-row v-if="
                          orderGoods.refundTime != null && orderGoods.refundStatus == 2
                        ">
                            <el-col :span="5">
                                <span class="detailContent">退款时间</span>
                            </el-col>
                            <el-col :span="19">
                                <span class="detailContentNum">{{
                                orderGoods.refundTime
                                }}</span>
                            </el-col>
                        </el-row>
                        <br />
                    </el-col>
                </el-row>
                <br />
                <!-- <el-divider /> -->
            </div>
            <el-divider content-position="left">订单日志部分</el-divider>
            <div>
                <el-row>
                    <el-col :offset="1">
                        <el-timeline>
                            <el-timeline-item v-for="(orderLog, index) in orderLogList" :key="index"
                                :timestamp="orderLog.createTime">
                                {{ orderLog.message }}
                                <span v-if="orderLog.beforeAccount - orderLog.afterAccount < 0">，余额增加【{{
                                orderLog.afterAccount - orderLog.beforeAccount
                                }}】元</span>
                                <span v-else-if="orderLog.beforeAccount - orderLog.afterAccount > 0">，余额减少【{{
                                orderLog.beforeAccount - orderLog.afterAccount
                                }}】元</span>
                            </el-timeline-item>
                        </el-timeline>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import Nav from "@/components/Nav";
import VTitle from "@/components/Title";
import {
    getOrderListAdmin,
    getOrderDetailAdmin,
    getGameGoodsDetail,
    getOrderLogAdmin,
    checkRefund
} from "@/api/index";
export default {
    name: "",
    created() {
        this.getOrderList();
    },
    components: {
        Nav,
        VTitle,
    },
    data() {
        return {
            orderList: [],
            orderDetail: {
                nickname: '',
                order: {
                    actualPrice: null,
                    address: null,
                    createTime: null,
                    id: 0,
                    orderSn: null,
                    payTime: null,
                    payType: 0,
                    payUrl: null,
                    remark: null,
                    status: 0,
                    totalPrice: 0,
                    updateTime: null,
                    userId: 0,
                },
                orderDetail: [
                    {
                        createTime: null,
                        gameGoodsId: 0,
                        id: 0,
                        num: 0,
                        orderSn: null,
                        orderSubSn: null,
                        price: 0,
                        refundStatus: 0,
                        refundTime: null,
                        updateTime: null,
                    },
                ],
            },
            orderLogList: [],
            statusList: [
                {
                    value: 4,
                    label: "全部",
                },
                {
                    value: 0,
                    label: "未支付",
                },
                {
                    value: 1,
                    label: "取消订单",
                },
                {
                    value: 2,
                    label: "已付款",
                },
                {
                    value: 3,
                    label: "已收货",
                },
            ],
            searchValue: 4,
            dialogOrderDetailVisible: false,
        };
    },
    methods: {
        async getOrderList() {
            let that = this;
            await getOrderListAdmin(that.searchValue).then(async (res) => {
                if (res.code == "200") {
                    if (res.data != null) {
                        that.orderList = res.data;
                    }
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        async getOrderDetail(orderSn) {
            this.dialogOrderDetailVisible = true;
            this.resetOrderDetail();
            let that = this;
            await getOrderDetailAdmin(orderSn).then(async (res) => {
                if (res.code == "200") {
                    if (res.data != null) {
                        let result = res.data;
                        //goodsInfo
                        for (var i = 0; i < res.data.orderDetail.length; i++) {
                            await getGameGoodsDetail(
                                res.data.orderDetail[i].gameGoodsId
                            ).then((res) => {
                                if (res.code == "200") {
                                    result.orderDetail[i].img = res.data.mainPicUrl;
                                    result.orderDetail[i].name = res.data.name;
                                } else {
                                    this.$message.error(res.msg);
                                    return;
                                }
                            });
                        }
                        that.orderDetail = res.data;
                        // 日志
                        await getOrderLogAdmin(orderSn).then((res) => {
                            if (res.code == "200") {
                                if (res.data != null) {
                                    that.orderLogList = res.data;
                                }
                            } else {
                                this.$message.error(res.msg);
                            }
                        });
                    }
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        async refund(orderSubSn, orderSn, refundStatus) {
            let that = this;
            await checkRefund(orderSubSn, refundStatus).then((res) => {
                if (res.code == "200") {
                    this.$message.success("操作成功~");
                    this.getOrderDetail(orderSn);
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        resetOrderDetail() {
            this.orderDetail = {
                nickname: '',
                order: {
                    actualPrice: null,
                    address: null,
                    createTime: null,
                    id: 0,
                    orderSn: null,
                    payTime: null,
                    payType: 0,
                    payUrl: null,
                    remark: null,
                    status: 0,
                    totalPrice: 0,
                    updateTime: null,
                    userId: 0,
                },
                orderDetail: [
                    {
                        createTime: null,
                        gameGoodsId: 0,
                        id: 0,
                        num: 0,
                        orderSn: null,
                        orderSubSn: null,
                        price: 0,
                        refundStatus: 0,
                        refundTime: null,
                        updateTime: null,
                    },
                ],
            };
            this.orderLogList = [];
        },
    },
};
</script>
  
<style lang="less" scoped>
h2 {
    float: left;
    height: 34px;
    line-height: 34px;
    font-size: 24px;
    position: relative;
    margin-bottom: 20px;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}

.el-input {
    width: 25%;
}

.order-list {
    width: 50%;
    margin-left: 25%;
}

a {
    font-size: 25px;
    color: #2abaca;
    font-weight: bolder;
}

.old-name {
    color: #000;
}

p {
    font-size: 12px;
    line-height: 20px;
    display: block;
    color: #9497a0;
}

.search {
    margin-left: 1000px;
}

.detailContentPrice {
    font-size: 16px;
    line-height: 20px;
    // display: block;
    color: red;
    font-weight: bold;
}

a {
    font-size: 18px;
    color: #2abaca;
    font-weight: bolder;
}
</style>